<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ZRender画图</title>
  <script src="./js/zrender.js"></script>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }

    #main {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="main"></div>
</body>
<script>
  //初始化一个实例
  var zr = zrender.init(document.getElementById('main'), {
    renderer: 'canvas',       //渲染方式 支持'canvas','svg','vml'
    devicePixelRatio: 1,      //画布大小与容器大小之比，仅当 renderer 为 'canvas' 时有效
    width: 'auto',            //画布宽度
    height: 'auto'            //画布高度
  });


  // 创建一个矩形
  // var rect = new zrender.Rect({
  //   style: {
  //     fill: 'red',      //填充颜色
  //     stroke: 'none'    //描边颜色
  //   },
  //   shape: {
  //     x: 100,           //x,y代表坐标
  //     y: 100,
  //     width: 200,
  //     height: 100,
  //     r: [3]            //圆角
  //   },
  //   z: 1                   //层次，大的会覆盖小的
  // });
  // zr.add(rect);

  // 通过平移设置位置
  var rect = new zrender.Rect({
    position: [100, 100],  //平移距离，
    style: {
      fill: 'red',
      stroke: 'none'
    },
    shape: {
      x: 0,
      y: 0,
      width: 200,
      height: 100,
      r: [3]
    },
    z: 1
  });
  zr.add(rect);
  zr.addHover(this, {
    rectHover: true,
    fill: '#fff',
    color: 'black'
  });

  var data = rect.getBoundingRect() //获取元素的包围盒
  console.log(data);

  // 更改矩形属性,使用attr方法，将矩形颜色更改为黄色，宽度更改300，高度更改为200，该方法触发重绘操作
  // rect.attr({
  //   style: {
  //     fill: 'yellow'
  //   },
  //   shape: {
  //     width: 300,
  //     height: 200
  //   }
  // })

  //给图形添加事件响应
  //点击事件
  rect.on('click', function (e) {
    console.log('点击了矩形')
    this.attr({
      style: {
        fill: '#000'
      }
    });
  });
  //或者给zr添加事件绑定,ZRender支持的事件有： ‘click’、 ‘mousedown’、 ‘mouseup’、 ‘mousewheel’、 ‘dblclick’、 ‘contextmenu’。
  // zr.on('click', function (e) {
  //   //可以查看 e 里包含的属性,进行判断
  //   console.log(e)
  // });

  // 给图形添加动画支持
  // rect.animate('shape', true)
  //   .when(1000, { x: 100 })
  //   .when(2000, { x: 0 })
  //   .when(3000, { y: 100 })
  //   .when(4000, { y: 0 })
  //   .start();

  // rect.animateTo({
  //   shape: {
  //     width: 500
  //   },
  //   style: {
  //     fill: 'blue'
  //   },
  //   position: [10, 10]
  // }, 1000, 100, 'cubicOut', function () {
  //   console.log('done')
  // });

  // 图形里的文字
  //很多属性和css里的属性一致
  rect.attr({
    style: {
      text: '图形文字',             //文字
      textFill: '#333',             //文字颜色
      fontSize: 12,                 //文字大小
      fontFamily: '',               //字体
      fontStyle: 'normal',          //字形
      fontWeight: 'normal',         //加粗
      textStroke: 'yellow',         //文字描边
      textWidth: 1,                 //字体线宽
      textHeight: 12,               //字体高度
      textLineWidth: 1,             //字体描边线宽
      textLineHeight: 14,           //字体行高
      textPosition: 'inside',       //字体位置
      textPadding: [0, 0, 0, 0],       //文字内边距
      transformText: true           //字体跟随变换效果
    }
  })

  // 图形变换
  //旋转
  // rect.animateTo({
  //   rotation: Math.PI / 3,         //正值代表逆时针旋转，负值代表顺时针旋转
  //   origin: [200, 100]            //设置变换中心
  // })

  //放大，缩小
  // rect.animateTo({
  //   scale: [1.5, 1.5],      //x,y轴方向放大至1.5倍
  //   origin: [240, 130]
  // })

  //平移
  // rect.animateTo({
  //   position: [100, 100]       //x,y轴分别平移10
  // })

  // 其他图形
  //圆形
  var circle = new zrender.Circle({
    style: {
      fill: 'red'
    },
    shape: {
      cx: 100,        //圆心X坐标
      cy: 100,        //圆心Y坐标
      r: 80           //半径
    },
    z: 2
  });
  // zr.add(circle);
  //圆弧
  var arc = new zrender.Arc({
    style: {
      stroke: 'none',
      fill: 'red'
    },
    shape: {
      cx: 300,
      cy: 300,
      r: 40,
      startAngle: 0,              //开始角度
      endAngle: Math.PI / 3         //结束角度
    }
  });
  // zr.add(arc);

  //扇形
  var sector = new zrender.Sector({
    style: {
      fill: 'red'
    },
    shape: {
      cx: 100,
      cy: 100,
      r: 80,                     //外半径
      r0: 60,                    //内半径
      startAngle: 0,             //开始角度
      endAngle: Math.PI / 3,       //结束角度
      clockwise: true            //顺时针
    }
  });
  // zr.add(sector);
  //椭圆
  var ellipse = new zrender.Ellipse({
    style: {
      fill: 'red'
    },
    shape: {
      cx: 100,
      cy: 100,
      rx: 160,         //横向半径
      ry: 80           //纵向半径
    }
  })
  // zr.add(ellipse);

  //心型
  var heart = new zrender.Heart({
    style: {
      fill: 'red'
    },
    shape: {
      cx: 200,
      cy: 200,
      width: 100,
      height: 100
    }
  });
  // zr.add(heart);
  //多边形
  var Polygon = new zrender.Polygon({
    style: {
      fill: 'red'
    },
    shape: {
      points: [[100, 100], [200, 80], [300, 160], [150, 130]]    //坐标集合
    }
  })
  // zr.add(Polygon)

  // 组的概念
  //getBoundingRect() 获取元素包围盒
  var g = new zrender.Group({
    slient: true                   //组内子孙元素是否响应鼠标事件
  });
  var rect = new zrender.Rect({
    style: {
      fill: 'red'
    },
    shape: {
      x: 0,
      y: 0,
      width: 200,
      height: 100
    }
  });
  var circle = new zrender.Circle({
    style: {
      fill: 'red'
    },
    shape: {
      cx: 200,
      cy: 50,
      r: 50
    }
  });
  // g.add(rect);
  // g.add(circle);
  // zr.add(g);

  console.log(rect.getBoundingRect());
  //返回{x: 0, y: 0, width: 200, height: 100}

  console.log(circle.getBoundingRect());
  //返回 {x: 150, y: 0, width: 100, height: 100}

  console.log(g.getBoundingRect());
  //返回{x: 0, y: 0, width: 250, height: 100}


  //遍历组内元素
  g.eachChild(function (item) {
    console.log(item);
  })

  //在组内删除元素
  g.remove(circle)   //指定删除
  g.removeAll()      //清空组内所有元素

  //整体变换，如
  g.attr({
    position: [100, 100]       //x轴，y轴分别平移100
  })

  // 线
  //直线
  var line = new zrender.Line({
    style: {
      stroke: 'red',       //线的颜色
      lineWidth: 1,        //线宽
      lineDash: [0]        //虚线样式
    },
    style: {
      x1: 10,              //起始点横坐标
      y1: 10,              //起始点纵坐标
      x2: 100,             //结束点横坐标
      y2: 100,             //结束点横坐标
      percent: 1
    }
  });
  //多边形折线段
  var polyline = new zrender.Polyline({
    style: {
      stroke: 'red',       //线的颜色
      lineWidth: 1,        //线宽
      lineDash: [0]
    },
    shape: {
      points: [[10, 10], [100, 100], [100, 200]]     //点集
    }
  })
  //贝塞尔曲线
  var bezierCurve = new zrender.BezierCurve({
    style: {
      stroke: 'red'
    },
    shape: {
      x1: 10,            //起始点横坐标
      y1: 10,            //起始点纵坐标
      x2: 200,           //结束点横坐标
      y2: 200,           //结束点横坐标
      cpx1: 50,           //控制点横坐标
      cpy1: 50            //控制点纵坐标
    }
  });

  // 文字
  var text = new zrender.Text({
    style: {
      text: '这是一段文字' + '\n' + '换行'
    }
  });
  //可以通过getBoundingRect()获取文字所占的空间
  console.log(text.getBoundingRect());
  //返回{x: 0, y: 0, width: 72, height: 24, lineHeight: 12}

  //特别注意的是rect必须设置宽高，才能获取到其所占的空间
  //例如
  var rect = new zrender.Rect({
    style: {
      text: '这是文字'
    },
    shape: {
      x: 1500,
      y: 100
    }
  })
  console.log(rect.getBoundingRect())
  //返回{x: 10, y: 10, width: 0, height: 0}

  //文字包围盒
  var text = new zrender.Text({
    style: {
      text: '这是一段文字',
      textBackgroundColor: 'red',     //包围盒背景
      textBorderColor: '#ccc',         //包围盒描边颜色
      textBorderWidth: 1,             //包围盒描边线宽
      textPadding: [10, 20, 10, 20]      //文字内边距，同css Padding
    }
  });









</script>

</html>